<template>
	<div class="edit-dialog-container">
		<el-dialog v-model="state.dialog.isShowDialog" :title="state.dialog.title" width="70%" :before-close="closeDialog">
			<h5 class="class-set">
				<el-input v-model="state.formData.name" placeholder="请输入规则名称" clearable></el-input>
			</h5>
			<!-- 规则配置 -->
			<div class="attend_settings">
				<div class="setting-title">
					<span>规则配置</span>
					<span style="margin-left:10px">
						<el-checkbox v-model="state.formData.isRuleCors" :true-label=1 :false-label=2>是否跨天</el-checkbox>
					</span>
				</div>
				<el-row>
					<el-switch v-model="state.formData.periodType" active-text="按周排班" inactive-text="按月排班" :active-value='2'
						:inactive-value='1' style="margin-left: 10px;" @change="periodTypeChange" />
				</el-row>
				<el-row class="day-choose">
					<h5>
						<el-checkbox @change="checkAllDay()">全选</el-checkbox>
					</h5>
					<el-checkbox-group v-model="state.formData.periodList">
						<el-checkbox v-if="state.formData.periodType === 2" v-for="item in week" :label=item.value>{{
							`周${item.label}`
						}}</el-checkbox>
						<el-checkbox v-else v-for="item in 31" :label=item>{{
							`${item}号`
						}}</el-checkbox>
					</el-checkbox-group>
				</el-row>
				<el-row class="day-choose day-choose__1">
					<el-row :gutter="20" justify="space-around">
						<el-col :span="6">
							<div class="m-top">最早签到：
								<el-time-picker size="default" style="width:120px" v-model="state.formData.signInStart"
									:format="'HH:mm:ss'" :value-format="'HH:mm:ss'" />
							</div>
						</el-col>
						<el-col :span="6">
							<div class="m-top">上班时间：
								<el-time-picker size="default" style="width:120px" v-model="state.formData.signInTime"
									:format="'HH:mm:ss'" :value-format="'HH:mm:ss'" />
							</div>
						</el-col>
						<el-col :span="6">
							<div class="m-top">最晚签到：
								<el-time-picker size="default" style="width:120px" v-model="state.formData.signInEnd"
									:format="'HH:mm:ss'" :value-format="'HH:mm:ss'" />
							</div>
						</el-col>
					</el-row>
					<el-row :gutter="20" justify="space-around">
						<el-col :span="6">
							<div class="m-top">最早签退：
								<el-time-picker size="default" style="width:120px" v-model="state.formData.signOutStart"
									:format="'HH:mm:ss'" :value-format="'HH:mm:ss'" />
							</div>
						</el-col>
						<el-col :span="6">
							<div class="m-top">下班时间：
								<el-time-picker size="default" style="width:120px" v-model="state.formData.signOutTime"
									:format="'HH:mm:ss'" :value-format="'HH:mm:ss'" />
							</div>
						</el-col>
						<el-col :span="6">
							<div class="m-top">最晚签退：
								<el-time-picker size="default" style="width:120px" v-model="state.formData.signOutEnd"
									:format="'HH:mm:ss'" :value-format="'HH:mm:ss'" />
							</div>
						</el-col>
					</el-row>
				</el-row>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button type="primary" @click="onSubmit">
						提交
					</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { ElMessage } from 'element-plus';
import { reactive } from 'vue'
import { useAttendRuleCreateApi, useAttendRuleQueryApi, useAttendRuleUpdateApi } from '/@/api/attend/rule';

const emit = defineEmits(['refresh']);

const userContent = () => {
	return {
		name: '',	// 名称
		isRuleCors: 2,	// 是否跨天 1->是;2->不是
		isRuleFlex: 1,	// 配置是否弹性上班 1->是;2->不是
		isRuleDiff: 1,	// 配置是否区分上下班 1->是;2->不是
		periodType: 2,	// 1->按月 2->按周
		periodList: [],	// 条目
		signInStart: '06:00:00',	// 上班签到有效开始时间
		signInTime: '09:00:00',	// 上班签到时间
		signInEnd: '09:10:00',	// 上班签到有效结束时间
		signOutStart: '17:00:00',	// 下班签到有效开始时间
		signOutTime: '18:00:00',	// 下班签到时间
		signOutEnd: '22:00:00',	// 下班签到有效结束时间
		ruleSignOverStart: '00:00:00',	// 配置加班开始时间
		ruleSignOverEnd: '00:00:00',	// 配置加班结束时间
		ruleDuration: '00:00:00',	// 配置上班时长
		ruleOverDuration: '00:00:00',	// 配置加班时长
	}
}

const state = reactive({
	dialog: {
		isShowDialog: false,
		type: '2',
		title: '新增'
	},
	formData: userContent() as any,
})

// 打开弹窗
const openDialog = (option: string, code: string) => {
	state.dialog.type = option;
	if (option === 'edit') {
		state.dialog.title = t('message.btnName.edit');
		state.dialog.type = '1';
		useAttendRuleQueryApi(code).then(({ content }) => {
			state.formData = content
			console.log(state.formData.periodList, 'list')
		})
	} else {
		state.formData = userContent()
	}
	state.dialog.isShowDialog = true;
}

// 关闭弹窗
const closeDialog = () => {
	state.formData = userContent()
	state.dialog.isShowDialog = false;
	emit('refresh');
};

// 星期
const week = [
	{
		value: 1,
		label: '一'
	},
	{
		value: 2,
		label: '二'
	},
	{
		value: 3,
		label: '三'
	},
	{
		value: 4,
		label: '四'
	},
	{
		value: 5,
		label: '五'
	},
	{
		value: 6,
		label: '六'
	},
	{
		value: 7,
		label: '日'
	}
];

// 全选
const checkAllDay = () => {
	if (state.formData.periodType === 2) {
		state.formData.periodList = [1, 2, 3, 4, 5, 6, 7]
	} else {
		state.formData.periodList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31]
	}
}
const periodTypeChange = () => {
	state.formData.periodList = []
}
// 提交
const onSubmit = () => {
	if (state.formData.name === '') {
		ElMessage.error('请填写规则名称');
		return false
	}
	if (state.dialog.type === '1') {
		useAttendRuleUpdateApi(state.formData).then(({ content }) => {
			ElMessage.success('操作成功');
			closeDialog()
		})
	}
	else {
		useAttendRuleCreateApi(state.formData).then(({ content }) => {
			ElMessage.success('操作成功');
			closeDialog()
		})
	}
}
defineExpose({
	openDialog
})
</script>

<style lang="scss" scoped>
.my-header {
	padding-bottom: 10px;
}

h5.class-set {
	margin-bottom: 10px;
	font-size: 14px;
	display: flex;
	align-items: center;

}

.attend_settings {
	border: 1px solid #eee;
	padding-bottom: 10px;
	margin-bottom: 20px;

	.setting-title {
		border-bottom: 1px solid #eee;
		padding: 10px;
		display: flex;
		// justify-content: space-between;
		align-items: center;
	}

	.day-choose {
		padding-left: 10px;
		padding-top: 6px;
		display: flex;
		flex-direction: column;

		h5 {
			margin-bottom: 0;
			display: flex;
			align-items: center;
			font-size: 14px;

			.el-checkbox {
				margin-left: 10px;
			}

			.left {
				margin-left: 10px;
			}
		}

		.b-border {
			border-bottom: 1px solid #eee;
			padding-bottom: 6px;
		}

		.m-top {
			margin-top: 6px;
			min-width: 200px;
		}
	}

	.day-choose__1 {
		height: auto;
		max-height: 180px;
	}
}

.button-add-group {
	width: 100%;
	border: 1px dashed #eee;
	margin-top: 10px;

	span {
		font-size: 20px;
		margin-right: 10px
	}
}

:deep(.el-dialog__header) {
	margin: 0;
	border-bottom: 1px dashed rgba(0, 0, 0, .2);
}

:deep(.el-dialog__footer) {
	border-top: 1px dashed rgba(0, 0, 0, .2);
}
</style>